<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        :invalid {
            border-color: #e88;
            -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
            box-shadow:0 0 5px rgba(255, 0, 0, .8);
        }
        :required {
            border-color: #555555;
            -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
            box-shadow: 0 0 5px rgba(0, 0, 255, .5);
        }
        form {
            width:305px; margin: 20px auto;
        }
        input {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            border:1px solid #111111;
            font-size:20px;
            width:300px;
            min-height:30px;
            display:block;
            margin-bottom:15px;
            margin-top:5px;
            outline: none;
            -webkit-border-radius:5px;
            border-radius:5px;
        }
        input[type=submit] {
            font-size:20px;
            width:305px;
            background:none;
            padding:10px;
        }
        button{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            border:1px solid #222222;
            font-size:20px;
            width:300px;
            min-height:30px;
            display:block;
            margin-bottom:15px;
            margin-top:5px;
            -webkit-border-radius:5px;
            border-radius:5px;
        }
        body{
            background: url("static/pic/bolandengbao.png") no-repeat center;
            background-size:300% 300%;
        }
        form{
            border: 1px solid red;
            border-radius:5px;
            -webkit-border-radius:5px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        function isPhoneNumber(tel) {
            var reg =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
            return reg.test(tel);
        }
        function test() {
            var password = $("#password").val();
            var repassword = $("#repassword").val();
            var user_id = $("#user_id").val()
            if (isPhoneNumber(user_id)){
                alert("是正确的手机号形式！")
                if (password !== repassword){
                    alert("密码不一致，请重新输入！")
                }else {
                    var result = confirm("Please make sure.");
                    if (result === true) {
                        $.ajax({
                            url : "/system/register",
                            type : "post",
                            dataType:"json",
                            contentType: "application/x-www-form-urlencoded", //默认值为表单提交
                            data : {user_id:user_id,
                                password:password},//请求参数
                            success : function(data) {
                                //请求成功处理
                                var res = data.result;
                                if (res === "true"){
                                    alert("添加成功！")
                                    window.location.href = data.view;
                                }else {
                                    alert("添加错误，已有对应手机号注册！")
                                }
                            },
                            error : function(data) {
                                //请求失败处理
                            }
                        });
                    } else {
                        alert("已取消提交");
                    }
                }
            }else {
                alert("手机号格式不合法！请重新输入！")
            }
        }
    </script>
</head>
<body>
<h1 id="ip_port"></h1>

<form method="post">
    <h1 align="center">志愿智能填报系统</h1>
    <h3 align="center">登录</h3>
    <h4>手机号：<input type="text" name="user_id" id="user_id"/></h4>
    <h4>密&nbsp;&nbsp;&nbsp;码：<input type="text" name="password" id="password"/></h4>
    <h4>请再次输入密码：<input type="text" name="repassword" id="repassword"/></h4>
    <input type="button" value="提交" onclick="test();">
</form>

</body>
</html>